<!DOCTYPE html>
<html>
<head>
<title>Nuclear Energy Level Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: white;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.font = '22px "Courier New", monospace';

// --- Main Drawing Logic ---

// 1. Draw the outer frame
ctx.strokeRect(50, 50, 400, 200);

// 2. Draw the energy levels (dashed lines)
ctx.setLineDash([7, 3]);

// Upper level
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

// Lower level
ctx.beginPath();
ctx.moveTo(100, 190);
ctx.lineTo(400, 190);
ctx.stroke();

// Reset to solid line for other elements
ctx.setLineDash([]);

// 3. Draw the transition arrow
const arrowStartX = 250;
const arrowStartY = 100;
const arrowEndX = 250;
const arrowEndY = 190;

// Draw line part
ctx.beginPath();
ctx.moveTo(arrowStartX, arrowStartY);
ctx.lineTo(arrowEndX, arrowEndY);
ctx.stroke();

// Draw arrowhead part (filled triangle)
ctx.beginPath();
ctx.moveTo(arrowEndX, arrowEndY); // Tip of the arrow
ctx.lineTo(arrowEndX - 6, arrowEndY - 10);
ctx.lineTo(arrowEndX + 6, arrowEndY - 10);
ctx.closePath();
ctx.fill();

// 4. Draw labels

// Left side labels (Energy)
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.fillText('0.37 MeV', 100, 95);
ctx.fillText('0 MeV', 100, 185);

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('E', 145, 225);

// Right side labels (Spin-Parity J^P)
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
// Using unicode for the superscript minus sign: ⁻ (U+207B)
ctx.fillText('5/2⁻', 330, 95);
ctx.fillText('7/2⁻', 330, 185);

// The J^P label
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '22px "Courier New", monospace';
ctx.fillText('J', 350, 225);
ctx.font = '15px "Courier New", monospace'; // smaller font for superscript
ctx.fillText('P', 360, 219);

// 5. Draw the figure caption
ctx.font = '22px "Courier New", monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Fig. 2.14', 250, 290);

</script>
</body>
</html>